<!--
 * @Author: zhangyang
 * @Date: 2022-06-10 15:23:20
 * @LastEditTime: 2022-06-12 14:31:29
 * @Description: 
-->
<script setup lang="ts">
import { usePlayer } from '@/hooks/usePlayer';
import Player from 'nplayer';

const { player, changeTv, prev, next, curr, data } = usePlayer();

useEventListener('keyup', (e) => {
  if (e.key === 'x') {
    next();
  }
  if (e.key === 's') {
    prev();
  }
});

onMounted(() => {
  player.mount('#video');
  player.on(Player.EVENT.LOADED_METADATA, () => {
    player.play();
  });
});
onUnmounted(() => {
  player.off(Player.EVENT.LOADED_METADATA);
});
</script>

<template>
  <div class="young-main">
    <div class="" id="video"></div>
    <div class="list">
      <button
        v-for="(item, index) in data"
        :key="index"
        class="btn"
        :class="{ 'bg-red-500': index === curr.index }"
        @click="changeTv(index)"
      >{{ item.name }}</button>
    </div>
  </div>
</template>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

.young-main {
  @apply flex w-full h-full;
  #video {
    @apply w-70vw;
  }
  .list {
    @apply flex flex-col h-100vh overflow-y-scroll w-30vw px-2 py-4;
    @apply children:not-first:mt-2;
  }
}
</style>
